<template>
    <div class="white-box">
        <!-- <div class="task-one">
            <div class="task-one__item">
                <el-input
                    class="!w-340"
                    placeholder="请输入标题"
                    v-model="state.title"
                    @keyup.enter.native="handleSearch"
                    clearable
                >
                </el-input>
            </div>
            <div class="task-one__btn clearfix">
                <el-button
                    type="primary"
                    :loading="loading"
                    icon="Search"
                    @click="handleSearch"
                    >搜索</el-button
                >
            </div>
        </div> -->

        <div class="message-list">
            <div
                v-for="item in arr_data"
                :key="item.id"
                class="message"
                @click="toMessageDetail(item.sid)"
            >
                <div class="title line-two">{{ item.title }}</div>
                <div class="time">{{ item.created }}</div>
            </div>
        </div>

        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="slot, sizes, prev, pager, next, jumper"
        >
            <span class="color-#606266"
                >共&nbsp;{{
                    totalNums >= 100 * pageSize
                        ? `${100 * pageSize}+`
                        : totalNums
                }}&nbsp;条</span
            >
        </el-pagination>
    </div>
</template>

<script setup>
import OneLoad from "@mixins/one-load";
import { getMessagesUnread } from "@/apis/message.js";
import { onActivated, reactive } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const state = reactive({
    ascended: false,
});

onActivated(() => {
    pubParams(getList);
});

const {
    loading,
    arr_data,
    pubRefreshParams,
    pubParams,
    page,
    pageSize,
    getdata,
    pageSizeNum,
    totalNums,
    openPaging,
} = OneLoad();

openPaging(getList);

function getList() {
    getdata(
        getMessagesUnread({
            current: page.value,
            size: pageSize.value,
            ascended: state.ascended,
            title: state.title,
        })
    );
}

// 搜索
const handleSearch = () => {
    pubRefreshParams(getList);
};

const toMessageDetail = (sid) => {
    sid &&
        router.push({
            name: "UserMessageDetail",
            query: {
                sid,
            },
        });
};
</script>

<style scoped lang="less">
.message-list {
    margin-bottom: 24px;
    .message {
        border-bottom: 1px solid #f6f6f6;
        padding: 10px 0 10px 14px;
        overflow: hidden;
        cursor: pointer;
        &:hover {
            background-color: #f8f8f8;
        }
        .title {
            font-size: 16px;
            color: #333;
            line-height: 30px;
        }
        .time {
            color: #999;
            font-size: 12px;
            line-height: 30px;
        }
    }
}
</style>
